<template>
  <div>
    <!-- 头部 -->
    <van-nav-bar title="首页" />
    <!-- 搜索 -->
    <van-search placeholder="请输入搜索关键词" @focus="router.push('/search')" />
    <!-- 轮播 -->
    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
      <van-swipe-item v-for="(v, i) in banners" :key="i">
        <img :src="v" alt="">
      </van-swipe-item>
    </van-swipe>
  </div>
  <!-- 菜单导航 -->
  <van-grid :column-num="5">
    <van-grid-item :icon="v.icon" v-for="(v, i) in menus" :key="i" :text="v.title" />
  </van-grid>
  <!-- 列表渲染 -->
  <!-- 触底加载更多 -->
  <!-- 使用 vant list 组件  作用： 瀑布流滚动加载，用于展示长列表，当列表即将**滚动到底部**时，会触发事件并加载更多列表项。 -->
  <!-- List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。 -->
  <van-list class="list" 
    v-model:loading="loading"
    :finished="finished"
    finished-text="没有更多了"
    @load="getList"
  >
    <div class="list-item" v-for="(v) in list" :key="v.div" @click="router.push(`/detail/${v.id}`)">
      <img :src="v.image" alt="">
      <div class="right">
        <h3>{{ v.title }}</h3>
        <p>{{ v.desc }}</p>
        <div>{{ v.price }}</div>
      </div>
    </div>
  </van-list>
</template>


<script setup>
import axios from 'axios';
import { ref } from 'vue';
import { useRouter } from 'vue-router';
const router = useRouter();
const banners = ref([
  require("../../assets/images/1.webp"),
  require("../../assets/images/2.webp"),
  require("../../assets/images/3.webp"),
  require("../../assets/images/4.webp"),
])

const random = (min, max) => {
  return Math.floor(Math.random() * (max - min + 1)) + min;
}

const menus = new Array(10).fill().map(() => {
  return {
    icon: `https://robohash.org/1?set=set${random(1, 5)}`,
    title: '标题'
  }
})

const list = ref([]);
// 数据是否正在加载状态 
// true => 正在加载...
// false => 当前无加载
const loading = ref(false)
// 数据加载是否完成 （注意： 总数据）
// true => 数据加载完毕
// false  => 数据没有加载完毕
const finished = ref(false)
// 页码
const pageCode = ref(1)
const getList = async () => {
  const resp = await axios.get('/list', { params: { pageCode: pageCode.value++ } });
  if(resp.data.length > 0) {
    list.value = list.value.concat(resp.data)
  } else {
    finished.value = true
  }
 
  loading.value = false
}


</script>


<style lang="scss">
.my-swipe {
  height: 200px;

  img {
    height: 200px;
  }
}

.list {
  .list-item {
    display: flex;
    padding: 10px;

    .right {
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-left: 10px;
    }
  }
}
</style>